<style>
	article { width: 100%;  }
	article.gymSelect { height: 28px; }
	label.gymName { font-size: 3vw; font-weight: bolder; color: #333; }
	input[name=gymName] { width: 50vw; height: 7vw; border-style: inset;  }
	button#btn_gymName { width: 15vw; height: 7vw; background-color: dodgerblue; border-radius: 5px; color: white; text-shadow: -1px -1px 1px #333; }
	.gymTitle span:nth-child(1) { font-size: 4vw; font-weight: bolder; color: dodgerblue; text-shadow: 1px 1px 3px #333;  }
	.gymTitle span:nth-child(2) { font-size: 3vw; font-weight: bolder; color: dodgerblue; margin-left: 20px; }

	article.charts { margin-top: 20px; }
	article.charts section { margin-top: 2vw; height: 40vw; border: 1px solid darkorange; font-size: 2vw; font-weight: bolder;  }
	aside.chartTitle { width: 20vw; height: 7vw; background-color: darkorange; font-size: 4vw; letter-spacing: auto; border-radius: 0 0 5px 0; color: white; font-weight: bolder;}
	.userHeight > aside.chartTitle, .userWeight > aside.chartTitle { position: absolute; right: 0; bottom: 0; width: 7vw; height: 20vw; writing-mode:vertical-rl; border-radius: 5px 0 0 0;}

	article.charts .line { width: 100%; display: flex; justify-content: space-around;}
	/*性别分析图*/
	.userSex { width: 44%; }
	.userSex > div { width: 100%; display: flex; justify-content: space-around; }
	.userSex > .sexIcon { margin-top: 4vw; }
	.userSex > .sexIcon img { width: 11vw; height: 11vw;   }
	.userSex .percent_line { width: 80%; height: 2vw; background-color: #be5108; margin-top: 3vw; }
	.userSex .percent_line > .first_percent { width: 20%; height: 2vw; background-color: #1d4999; }
	/*BMI分析图*/
	.userBMI { width: 55%;}
	.userBMI .bmi_bom { width: 18%; height: 80%; }
	.userBMI .bmi_bom :nth-child(1) { width: 100%; margin-left: 10%; height: 30%; text-align: center; overflow: visible;  }
	.userBMI .bmi_bom :nth-child(2) { width: 40%; margin-left: 30%; height: 60%;  }
	.userBMI .bom1 { background-color: #c23531 }
	.userBMI .bom2 { background-color: #2f4554 }
	.userBMI .bom3 { background-color: #61a0a8 }
	.userBMI .bom4 { background-color: #d48265 }
	.userBMI .bmi_data { width: 32%; height: 40%; margin-top: 5%; text-align: center; }


	/*年龄分析图*/
	.userAge { width: 100%;}
	.userAge > .line { width: 100%; height: 80%; }
	.userAge > .line > div.chart { width: 60%; height: 100%;  }
	.userAge > .line > div.chart_data { width: 40%; height: 100%;  }
	.userAge .chart_data > div { width: 50%; height: 80%; display: flex; flex-flow: column nowrap; justify-content: space-between; }
	.userAge .chart_data > div > div { width: 14vw; height: 3.5vw; line-height: 3.5vw; color: white; font-size: 1vw; }
	.userAge .chart_data > div > div:nth-child(1) {background-color: #c23531;}
	.userAge .chart_data > div > div:nth-child(2) {background-color: #2f4554;}
	.userAge .chart_data > div > div:nth-child(3) {background-color: #61a0a8;}
	.userAge .chart_data > div > div:nth-child(4) {background-color: #d48265;}
	.userAge .chart_data > div > div:nth-child(5) {background-color: #91c7ae;}
	.userAge .chart_data > div > div:nth-child(6) {background-color: #749f83;}
	/*'#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83'*/


	/*身高分析图, 体重分析图 */
	article.charts section.userHeight, article.charts section.userWeight { width: 100%; height: 60vw; position: relative; }
	.userHeight > div.chart, .userWeight > div.chart { width: 95%; height: 90%; }
	
</style>

<div id="container">
	
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">用户画像</h1>
	</header>
	
	<div class="mui-content" id="vm">
		<div class="chart_conditions">
			<div class="lines">
				<div class="labels">统计对像：</div>
				<div class="inputs" id="pick_target" :pick_target="pick_target" :target_type="target_type" >{{target_name}}</div>
			</div>
		</div>
		<article class="charts">
			<div class="gymTitle"><span class="gymName"></span><span class="all_users"></span></div>
			<div class="line">
				<section class="userSex"> 

					<aside class="chartTitle">性别</aside>
					<div class="sexIcon"><img src="image/male.png"><img src="image/female.png"></div>
					<div><div id="male_percent">男性：%</div><div id="female_percent">女性：%</div></div>
					<div><div class="percent_line"><div class="first_percent"></div></div></div>
					<div class="percent_data"><div id="male_count">人</div><div id="female_count">人</div></div>

				</section>
				<section class="userBMI">
					<aside class="chartTitle">BMI</aside>
					<div class="line flex_rr">
						<div class="bmi_bom"><div id="bmi1">人</div><div class="bom1"></div>	</div>
						<div class="bmi_data flex_cb"><div>偏瘦</div><div>BMI≤18.4</div><div id="bmir1">占比：%</div></div>
						<div class="bmi_bom"><div id="bmi2">人</div><div class="bom2"></div>	</div>
						<div class="bmi_data flex_cb"><div>正常</div><div>18.5≤BMI≤23.9</div><div id="bmir2">占比：%</div></div>
					</div>
					<div class="line flex_rr">
						<div class="bmi_bom"><div id="bmi3">人</div><div class="bom3"></div>	</div>
						<div class="bmi_data flex_cb"><div>偏胖</div><div>24.0≤BMI≤27.9</div><div id="bmir3">占比：%</div></div>
						<div class="bmi_bom"><div id="bmi4">人</div><div class="bom4"></div>	</div>
						<div class="bmi_data flex_cb"><div>超胖</div><div>BMI≥28.0</div><div id="bmir4">占比：%</div></div>
						
					</div>
				</section>
			</div>	
			<section class="userAge">
				<aside class="chartTitle">年龄</aside>
				<div class="line flex_rr">
					<div class="chart" id="userAge"></div>
					<div class="chart_data flex_rb">
						<div class="chart_data_title flex_cb">
							<div>25岁以下</div>
							<div>26~30岁</div>
							<div>31~35岁</div>
							<div>36~40岁</div>
							<div>41~45岁</div>
							<div>45岁以上</div>
						</div>
						<div class="chart_data_d flex_cb">
							<div>人</div>
							<div>人</div>
							<div>人</div>
							<div>人</div>
							<div>人</div>
							<div>人</div>
						</div>
					</div>
				</div>

				
			</section>
		

			<section class="userHeight">
				
				<div class="chart" id="userHeight"></div>
				<aside class="chartTitle">身高</aside>
			</section>
			<section class="userWeight">
				
				<div class="chart" id="userWeight"></div>
				<aside class="chartTitle">体重</aside>
			</section>	
				
		</article>	
		
	</div>
	

	
</div>

<script>




		// chart datas 

		var option_pie = {
			tooltip: { trigger: 'item',  formatter: "{d}%" },
			colors:[],
			series: [
				{
					name:'年龄段',
					type:'pie',
					radius: ['80%', '100%'],
					// avoidLabelOverlap: false,
					label: {normal: { formatter: "{d}%", position: "inner" }},
					labelLine: { normal: { show: false }},
					data:[
						{value:335, name:'25岁以下'},
						{value:310, name:'26~30岁'},
						{value:234, name:'31~35岁'},
						{value:135, name:'36~40岁'},
						{value:548, name:'41~45岁'},
						{value:123, name:'45岁以上'}
					]
				}
			]
		};

		var option_height = {
			tooltip: { trigger: 'axis', axisPointer: {type: 'cross'}},
			grid: {bottom: '25%'},
			legend: {data:['人数','占比'],left: 'center',bottom: 0},
			xAxis: [
				{ type: 'category', axisTick: {alignWithLabel: true}, axisLabel: {rotate: 25},
				  data: ['155cm以下','156~160cm','161~165cm','166~170cm','171~175cm','176~180cm','180cm以上']
				}
			],
			yAxis: [
				{ type: 'value', name: '人数', min: 0, position: 'left', axisLabel: {formatter: '{value}'} },
				{ type: 'value', name: '占比', min: 0, position: 'right', axisLabel: {formatter: '{value}%'}, splitLine: {show: false} }
			],
			series: [
				{
					name:'人数',
					type:'bar',
					barCategoryGap: '70%',
					itemStyle:{ normal:{ color: 'steelblue'}},
					label: {  normal: {show: true,  formatter: "{c}",position: "inside", color: 'black' }},
					data:[]
				},
				{
					name:'占比',
					type:'line',
					itemStyle:{ normal:{ color: 'darkorange', }},
					label: { normal: { show: true,  formatter: "{c}%",  position: "top",  }},
					yAxisIndex: 1,
					data:[]
				}
			]
		};



		var option_weight = {
			
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross'
				}
			},
			grid: {
				bottom: '25%'
			},

			legend: {
				data:['人数','占比'],
				left: 'center',
				top: 'bottom'
			},
			xAxis: [
				{
					type: 'category',
					axisTick: {
						alignWithLabel: true
					},
					axisLabel: {
						rotate: 25
					},
					splitLine: {
						show: true
					},
					data: ['45kg以下','46~50kg','51~55kg','56~60kg','61~65kg','66~70kg', '71~75kg', '76以上']
				}
			],
			yAxis: [
				{
					type: 'value',
					name: '人数',
					min: 0,
					position: 'left',
					axisLabel: {
						formatter: '{value}'
					},
					
					splitLine: {
						show: false
					}
				},
				{
					type: 'value',
					name: '占比',
					min: 0,
					position: 'right',
					axisLabel: {
						formatter: '{value}%'
					},
					
					splitLine: {
						show: false
					}
				}
			],
			series: [
				{
					name:'人数',
					type:'line',
					itemStyle:{
						normal:{
							color: 'steelblue'
						}
					},
					label: {
						normal: {
							show: true,
						   formatter: "{c}",
						   position: "bottom",
						   color: 'black'

						}
					},
					data:[]
				},
				{
					name:'占比',
					type:'line',
					itemStyle:{
						normal:{
							color: 'darkorange'
						}
					},
					label: {
						normal: {
							show: true,
						   formatter: "{c}%",
						   position: "top",
						   color: 'darkorange'

						}
					},
					yAxisIndex: 1,
					data:[]
				}
			]
		};


		// public data
		var curTarget = '全国';
		var curLevel = 0;
		var all_data_count = 0
		var data = [];
		console.log("show user")

		var vm = new Vue({
			el: "#vm",
			data: {
				pick_target: 0,
				target_type: 'region',
				target_name: ''
			},
			
		})		

		vm.$watch("target_name", function(){
			showCharts();
		})


		var showCharts = function(){

			
			// console.log(gymName);
			$.get(dataDomain + "getData.php", {do: 'getGymUsers'}, function(r){
				console.log(r)
				data = r;
				all_data_count = data.length;
				$("span.all_users").html("(共有学员" + all_data_count + "人)" );
				// console.log("s.length=" + s.length);

				// 处理第一图，用户性别比

				// 统计男女性别人数
				var sex = {male: 0, female: 0, norecord: 0};
				for(var i in data){
					var x = data[i];
					if(x.sex == 1){
						sex.male ++;
					}else if(x.sex == 2){
						sex.female ++;
					}else{
						sex.norecord ++;
					}
				}

				console.log(sex);
				// console.log("data.length=" + data.length);

				$("section.userSex").find("#male_percent").html("男性：" + Math.round(sex.male / (sex.male + sex.female) * 100) + "%");
				$("section.userSex").find("#female_percent").html("女性：" + Math.round(sex.female / (sex.male + sex.female) * 100) + "%");
				$("section.userSex").find(".first_percent").css("width", Math.round(sex.male / (sex.male + sex.female) * 100) + "%");
				$("section.userSex").find("#male_count").html(sex.male  + "人");
				$("section.userSex").find("#female_count").html(sex.female  + "人");


				// 处理第二图，用户bmi分布
				var bmi = [0, 0, 0, 0];
				for(var i in data){
					var x = data[i];
					var b = Math.ceil(x.weight / x.height / x.height * 100000);
					// console.log(b)
					if(b){
						if(b <= 184){
							bmi[0] ++ ;
						}else if(b <= 239){
							bmi[1] ++ ;
						}else if(b <= 279){
							bmi[2] ++ ;
						}else{
							bmi[3] ++
						}
					}
				}

				console.log(bmi)
				
				$("section.userBMI").find("#bmi1").html(bmi[0] + '人');
				$("section.userBMI").find("#bmi2").html(bmi[1] + '人');
				$("section.userBMI").find("#bmi3").html(bmi[2] + '人');
				$("section.userBMI").find("#bmi4").html(bmi[3] + '人');
				var goodbmi = bmi[0] + bmi[1] + bmi[2] + bmi[3];  // bmi值有效的总人数
				$("section.userBMI").find("#bmir1").html("占比：" + Math.round(bmi[0] / goodbmi * 100) + '%');
				$("section.userBMI").find("#bmir2").html("占比：" + Math.round(bmi[1] / goodbmi * 100) + '%');
				$("section.userBMI").find("#bmir3").html("占比：" + Math.round(bmi[2] / goodbmi * 100) + '%');
				$("section.userBMI").find("#bmir4").html("占比：" + Math.round(bmi[3] / goodbmi * 100) + '%');


				// 处理第三图，用户年龄分布

				var age = [0,0,0,0,0,0];

				for(var i in data){
					var x = data[i];
					var a = x.age
					if(! a && x.birthday){
						// 没有年龄但是有生日的，将生日换算成年龄
						a = 2018 - new Date(Date.parse(x.birthday)).getFullYear();
					}
					if(a){
						if(a <= 25) {
							age[0] ++ ;
						}else if(a <= 30){
							age[1] ++ ;
						}else if(a <= 35){
							age[2] ++ ;
						}else if(a <= 40){
							age[3] ++ ;
						}else if(a <= 45){
							age[4] ++ ;
						}else {
							age[5] ++ ;
						}
					}
				}
				console.log(age);
				let option_pie = rd.chart_option.createNew();
				option_pie.add_series([{name:'年龄段', type:'pie'}]);
				let k = [
					{value:0, name:'25岁以下'},
					{value:0, name:'26~30岁'},
					{value:0, name:'31~35岁'},
					{value:0, name:'36~40岁'},
					{value:0, name:'41~45岁'},
					{value:0, name:'45岁以上'}
				];
				for(var i = 0; i < 6; i++){
					k[i].value = age[i];
				}
				option_pie.option.series[0].data = k;
				var i = 0;
				$("section.userAge .chart_data_d div").each(function(){
					$(this).html(age[i] + "人");
					i ++;
				})


				// 处理第四图，用户身高分布
				var height = [0,0,0,0,0,0,0];
				var heightR = [];
				var goodheight = 0
				for(var i in data){
					var h = data[i].height;
					if(h){
						if(h <= 155){
							height[0] ++ ;
						}else if(h <= 160){
							height[1] ++ ;
						}else if(h <= 165){
							height[2] ++ ;
						}else if(h <= 170){
							height[3] ++ ;
						}else if(h <= 175){
							height[4] ++ ;
						}else if(h <= 180){
							height[5] ++ ;
						}else{
							height[6] ++ ;
						}
						goodheight ++;
					}
				}
				console.log(height);
				let option_height = rd.chart_option.createNew();
				option_height.add_series([{name: "人数", type: "bar"}, {name: "占比", type: "line"}]);
				option_height.option.xAxis[0].data = ['155cm以下','156~160cm','161~165cm','166~170cm','171~175cm','176~180cm','180cm以上']
				option_height.option.series[0].data = height;
				for (var i = 0; i < 7; i ++){
					heightR[i] = Math.round(height[i] / goodheight * 100);
				}
				option_height.option.series[1].data = heightR;
				option_height.option.series[1].yAxisIndex = 1;
				option_height.option.yAxis[1].max = 100;

				// 处理第五图，用户体重分布
				var weight = [0,0,0,0,0,0,0,0];
				var weightR = [];
				var goodweight = 0;
				for (var i in data){
					var w = data[i].weight;
					if(w){
						if(w <= 45){
							weight[0] ++ ;
						}else if(w <= 50){
							weight[1] ++ ;
						}else if(w <= 55){
							weight[2] ++ ;
						}else if(w <= 60){
							weight[3] ++ ;
						}else if(w <= 65){
							weight[4] ++ ;
						}else if(w <= 70){
							weight[5] ++ ;
						}else if(w <= 75){
							weight[6] ++ ;
						}else {
							weight[7] ++ ;
						}
						goodweight ++;
					}
				}
				console.log(weight);
				let option_weight = rd.chart_option.createNew();
				option_weight.add_series([{name: "人数", type: "bar"}, {name: "占比", type: "line"}])
				option_weight.option.xAxis[0].data = ['45kg以下','46~50kg','51~55kg','56~60kg','61~65kg','66~70kg', '71~75kg', '76以上'];
				option_weight.option.series[0].data = weight;
				for(var i = 0; i < 8; i ++){
					weightR[i] = Math.round(weight[i] / goodweight * 100);
				}
				option_weight.option.series[1].data = weightR;
				option_weight.option.series[1].yAxisIndex = 1;
				option_weight.option.yAxis[1].max = 100;

				echarts.init(document.getElementById('userAge')).setOption(option_pie.option);
				echarts.init(document.getElementById("userHeight")).setOption(option_height.option);
				echarts.init(document.getElementById("userWeight")).setOption(option_weight.option);

				// 所有显示都完成之后，再显示门店名称，以保持显示名称与数据统一
				$("span.gymName").html(gymName);
			}, 'json')
				
				
			
		}

		vm.target_name = "全国";
		picker_choose_gym();
		

		// $("input[name=gymName]").keyup(function(event){
		// 	// console.log(event.keyCode);
		// 	if(event.keyCode == 13){
		// 		$("button#btn_gymName").triggle("click");
		// 	}
		// })

</script>